import React, { useState, useEffect, useCallback, useMemo, FC, useRef } from 'react';
import * as charts from 'echarts';
import ReactEcharts from 'echarts-for-react';

type EChartsOption = charts.EChartsOption;

const EchartsTest: FC = (props) => {
  const getOption = () => {
    const option: EChartsOption = {
      title: {
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '客户数量 <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: '5%'
      },
      series: [
        {
          name: '客源统计',
          type: 'pie',
          radius: ['40%', '70%'],
          data: [
            { value: 57, name: '很高' },
            { value: 29, name: '较高' },
            { value: 58, name: '一般' },
            { value: 30, name: '较低' },
            { value: 4, name: '很低' },
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    return option;
  };
  return (
    <>
      <div>
        <div style={{ width: '100%', }}>
          <ReactEcharts option={getOption()} />
        </div>
      </div>
    </>
  );
};

export default EchartsTest;

